<script setup>
    import {ref} from 'vue'
    //导入cart仓库
    import useCartStore from '@/stores/cart.js'
    import useTestStore from '@/stores/test.js'
    const cartStore = useCartStore()
    const testStore = useTestStore()
    const props = defineProps(['productInfo','shopName','min'])

    // 1.对该商品的数量进行++
    // 2.判断购物车是否存在
    // 2.1购物车不存在----->创建购物车
    // 2.2购物车存在---->3.判断商品是否存在
    // 3.1商品不存在--->创建商品

    // 添加购物车
    const addCart = ()=>{

        //1.对该商品的数量进行++
        props.productInfo.number ++
        //2.查找当前店铺的购物车
        let res = cartStore.cartList.find(item => item.name === props.shopName)
        //3.判断购物车是否存在
        if(!res){
            // 3.1购物车不存在
            let cart = {name:'',list:[]}   // 1.name商店名称   2.list商品数组
            cart.name = props.shopName
            cart.list.push(props.productInfo)
            cartStore.cartList.push(cart)
        }else{
            // 3.2购物车存在,判断商品是否存在
            let res1 = res.list.find(item => item.id === props.productInfo.id)
            if(!res1){
                res.list.push(props.productInfo)
            }
        }
        console.log(cartStore.cartList)
    }

    // 减购物车
    const subCart = ()=>{
        // 1.number--
        if(props.productInfo.number > 0){
            props.productInfo.number --
        }
        // 2.商品数量为0，将商品删除
        if(props.productInfo.number === 0){
            // 2.1获取当前商店的购物车
            let res = cartStore.cartList.find(item => item.name === props.shopName)
            if(res){
                console.log('删除')
                // 3.删除----> filter
                res.list = res.list.filter(item => item.id !== props.productInfo.id)
            }
        }
        console.log(cartStore.cartList)
    }

</script>

<template>
    <div class="product">
        <div :class="[props.min ? 'product_img--min' : 'product_img' ]">  <!-- <div class="product_img--min"> -->
            <img :src="`http://www.dell-lee.com/imgs/vue3/${productInfo.imgName}.png`" alt="">
        </div>
        <div class="product_content">
            <div class="product_content_title">{{ productInfo.title }}</div>
            <!-- <div class="product_content_sales">月售 {{ props.product.sales }} 件</div> -->
            <slot></slot>
            <div class="product_content_price">￥{{ productInfo.price }} <span class="product_content_old_price">￥{{ productInfo.oldPrice }}</span></div>
            
        </div>
        <div class="product_number">
            <span class="product_number_minus" @click="subCart">-</span>
            {{ productInfo.number }}
            <span class="product_number_plus" @click="addCart">+</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.product {
    padding: .18rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    border-bottom: .01rem solid $content-bgColor;

    &_img {
        width: .68rem;
        margin-right: .18rem;

        img {
            width: .68rem;
            height: .68rem;
        }
    }
    &_img--min {
        width: .48rem;
        margin-right: .18rem;

        img {
            width: .48rem;
            height: .48rem;
        }
    }
    &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &_title {
            font-size: .14rem;
            font-weight: bold;
            color: $content_fontcolor;
            @include ellipse;
        }
        &_price {
            color: $hightlight-fontColor;
        }
        &_old_price {
            color: $light-fontColor;
            text-decoration: line-through;
        }
    }
    &_number {
        position: absolute;
        right: .18rem;
        bottom: .18rem;

        &_minus,&_plus {
            display: inline-block;
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            font-size: .16rem;
            text-align: center;
        }
        &_minus {
            border: .01rem solid $medium-fontColor;
            color: $medium-fontColor;
            margin-right: .08rem;
        }
        &_plus {
            background-color: $btn-bgColor;
            color: $bgColor;
            margin-left: .08rem;
        }
    }
}
</style>